<%= include ic/header.html %>
<style>
a{color:#2D2D84;}
.am-topbar{height:165px;}
#collapse-head{display:none;}
#main{text-align:center;padding-bottom:20px;}
#content{text-align:left;width:1024px;margin:auto;padding:30px 0;}
#stepBar{width:100%;height:85px;background:url(/i/step1.png) no-repeat center center;}
#navBar{width:100%;height:60px;}
#navBar div{width:auto;height:60px;line-height:60px;padding:0 20px;font-family:"宋体";font-size:20px;font-weight:700;}
#navBar div a{color:#111;}
#listTitle{height:50px;width:100%;text-align:center;line-height:50px;border-top:1px #aaa solid;border-bottom:1px #aaa solid;color:#2D2D84;}
.tr .title,.tr .cover,.tr .ckbox,.tr .price,.tr .num,.tr .subtotal{width:200px;height:100%;float:left;}
.tr .ckbox{width:70px;}
.tr .cover{width:140px;}
.tr .title{width:214px;padding:0 12px;}
.tr .ckbox .cb{width:23px;height:23px;margin:88px auto;background:url(/i/cb.png) no-repeat 0 0;cursor:pointer;}
.itemList .tr{height:200px;border-bottom:1px solid #aaa;}
.tr .ckbox .cb.c{background:url(/i/cb.png) no-repeat 0 bottom;}
.tr .cover img{height:150px;margin:25px auto;}
.itemList .tr .title{color:#a9a9a9;}
.tr .title h2{margin:25px 0 0;color:#111;}
.tr .title h3{margin:0 0 25px;color:#2D2D84;}
.itemList .tr .price,.itemList .tr .subtotal,.itemList .tr .num{line-height:200px;text-align:center;overflow:hidden;font-size:3rem;}
.itemList .tr .num{line-height:30px;font-size:2rem;padding:64px 20px 0 22px;}
.num div{float:left;margin-left:10px;}
.num div:first-child{margin-left:0;}
.num i{margin-top:2px;border:1px #111 solid;padding:0 10px;cursor:pointer;}
.num input{width:5rem;text-align:center;font-size:2rem;}
.num .stock{width:100%;margin:10px 0 0;font-size:1.6rem;}
.num .del{width:100%;margin:5px 0 0;font-size:1.6rem;}

#batchCtr{height:50px;width:100%;text-align:center;line-height:50px;border-bottom:1px #aaa solid;color:#2D2D84;}
#batchCtr .ckbox .cb{margin-top:14px;}
#batchCtr .cover span{margin-right:20px;}

#countBox{width:340px;float:right;margin-top:100px;}
#countBox hr{margin:10px 0;border-color:#a9a9a9}
#countBox .li{width:100%;}
#countBox .li .am-fl{width:40%;}
#countBox .li .am-fr{width:60%;text-align:right;}
#countBox .li2{font-size:2.4rem;}
#countBox .li.ctr{line-height:40px;padding:10px 0;}
#countBox .li.ctr .am-fl{text-align:right;color:#bbb;}
#countBox .li.ctr .am-fr{text-align:center;padding-left:10px;}
#countBox .li.ctr .btn{background:#2D2D84;color:#fff;}
</style>
<div class="am-cf" id="main">
  <div id="content">
    <div id="stepBar"></div>
    <div id="navBar">
      <div class="am-fl"><a href="/user/orderlist">&lt; 订单列表</a></div>
      <div class="am-fr"><a href="/item?search=">继续购物 &gt;</a></div>
    </div>
    <div id="listTitle" class="tr">
      <div class="ckbox"></div>
      <div class="cover">商品</div>
      <div class="title"></div>
      <div class="price">单价</div>
      <div class="num">数量</div>
      <div class="subtotal">小计</div>
    </div>
    <div class="itemList am-cf">
      <% if(results.length==0){ %>
      <div class="tr" style="line-height:200px;text-align:center;font-size:3rem;color:#a9a9a9;">购物车中暂无商品</div>
      <% }else{ %>
      <% for(var i=0;i<results.length;i++){ %>
      <div class="tr">
        <div class="ckbox">
          <div class="cb<% if(results[i].stock>=results[i].num){ %> c<% }else{ %> d<% } %>" onclick="checkItem(this)" data-id="<%= results[i].id %>"></div>
        </div>
        <div class="cover">
          <img src="/p?id=<%= results[i].cover %>&w=150&h=150" />
        </div>
        <div class="title">
          <h2><%= results[i].Brand %></h2>
          <h3><%= results[i].title %></h3>
          <%= results[i].size %>
        </div>
        <div class="price">&yen;<%= results[i].price %></div>
        <div class="num">
          <div><i class="am-icon-minus" onclick="minus(this)"></i></div>
          <div>
          <% if(results[i].stock==0){ %>

          <% }else{ %>
            <input data-price="<%= results[i].price %>" type="tel" value=<% if(results[i].stock<results[i].num){ %><%= results[i].stock %><% }else{ %><%= results[i].num %><% } %> min=1 max=<%= results[i].stock %> /></div>
            <div><i class="am-icon-plus" onclick="plus(this)"></i></div>
            <div class="am-cf"></div>
            <div class="stock" <% if(results[i].stock<results[i].num){ %>style="color:#a11"<% } %>>（库存：<font><%= results[i].stock %></font>）
          <% } %>
          </div>
          <div class="am-cf"></div>
          <div class="del"><a href="javascript:void(0)" onclick="removeOne(this)" >删除</a></div>
        </div>
        <div class="subtotal">&yen;<%= results[i].price*results[i].num %>.00</div>
      </div>
      <% } %>
      <% }%>
    </div>
    <div id="batchCtr" class="tr">
      <div class="ckbox"><div class="cb c"  onclick="checkAll()"></div></div>
      <div class="cover">
        <span><a href="javascript:void(0)"  onclick="checkAll()" >全选</a></span>
        <span><a href="javascript:void(0)" onclick="removeAll()" >删除</a></span>
      </div>
      <div class="title"></div>
      <div class="price"></div>
      <div class="num"></div>
      <div class="subtotal"></div>
    </div>
    <div class="am-cf"></div>
    <div id="countBox">
      <hr/>
      <div class="li">
        <div class="am-fl">商品金额</div>
        <div class="am-fr" id="totalmoney">&yen;<font>0.00</font></div>
      </div>
      <div class="li">
        <div class="am-fl">优惠金额</div>
        <div class="am-fr" id="dismoney">&yen;<font>0.00</font></div>
      </div>
      <div class="li">
        <div class="am-fl">运费</div>
        <div class="am-fr">免运费</div>
      </div>
      <div class="am-cf"></div>
      <hr/>
      <div class="li li2">
        <div class="am-fl">合计</div>
        <div class="am-fr">&yen;<font id="data-amount">0.00</font></div>
      </div>
      <div class="am-cf"></div>
      <div class="ctr li">
        <div class="am-fl">共 <font id="data-count">0</font> 件商品</div>
        <div class="am-fr">
          <div class="btn" style="cursor:pointer" onclick="postOrderList()">结算</div>
        </div>
      </div>
    </div>
  </div>
</div>
<%= include ic/footer.html %>
<script type="text/javascript">
var $loading = $("#my-modal-loading");
$(function() {
  count();
});

function checkItem(obj){
  if($(obj).hasClass("c")){
    $(obj).removeClass("c");
  }else if(!$(obj).hasClass("d")){
    $(obj).addClass("c");
  }
  count();
}

function checkAll(){
  if($("#batchCtr .cb").hasClass("c")){
    $(".tr .cb").removeClass("c");
  }else{
    $(".tr .cb:not(.d)").addClass("c");
  }
  count();
}

function removeItem(ids){
  if(ids.length==0){
    mAlert({
      title:"错误",
      text:"未选择操作对象",
      onConfirm:function(e) {}
    });
  }else{
    var $Confirm = $("#my-confirm");
  	var $confirmBtn = $Confirm.find('[data-am-modal-confirm]');
  	$confirmBtn.one('click', function() {
      $loading.modal('open');
  		$.post("delcart", { "ids": ids,"ajax":true },function(data){
        $loading.modal('close');
        count();
  			if(data){
  				if(data && data.success){
            window.location.href=window.location.href;
  				}else if(!data.error && !data.user){
            //console.dir(data);
            mAlert({
              title:"提示",
              text:"请先登录！",
              onConfirm:function(e) {
                gotoUrl("/login?refer="+encodeURI('/user/cart'));
              }
            });
          }else{
  					mAlert({
  						title:"错误",
  						text:data.error
  					});
  				}
  			}else{
  				mAlert({
  					title:"错误",
  					text:"操作失败！"
  				});
  			}
  		}, "json");
  	});

  	$Confirm.find(".text").text("你确定要将这些商品从购物车中删除吗？");
  	if($Confirm.is(".am-modal-out")){
  		$Confirm.modal('open');
  	}else{
  		$Confirm.modal({relatedTarget: this});
  	}
  }
}

function postOrderList(){
  var items = [];
  $(".itemList .cb.c").map(function(){
    var item={};
    item.id   = $(this).data("id");
    item.num  = parseInt($(this).parents(".tr").find("input").val());
    items.push(item);
  });
  //console.log(items);
  if(items.length==0){
    mAlert({
      title:"错误",
      text:"未选择需要购买的商品",
      onConfirm:function(e) {}
    });
  }else{
    $loading.modal('open');
    $.post("createBill", { "items": items,"ajax":true },function(data){
      $loading.modal('close');
      if(data){
        console.log(data);
        if(data && data.success){
          gotoUrl("/setAddress?id="+data.id);
        }else if(!data.error && !data.user){
          //console.dir(data);
          mAlert({
            title:"提示",
            text:"请先登录！",
            onConfirm:function(e) {
              gotoUrl("/login?refer="+encodeURI('/user/cart'));
            }
          });
        }else{
          mAlert({
            title:"错误",
            text:data.error
          });
        }
      }else{
        mAlert({
          title:"错误",
          text:"操作失败！"
        });
      }
    }, "json");
  }
}

function removeOne(obj){
  var ids=[];
  var id=$(obj).parents(".tr").find(".cb").data("id");
  ids.push(id);
  removeItem(ids);
}

function removeAll(){
  var ids=$(".itemList .tr .cb.c").map(function(){
    return $(this).data("id");
  }).get();
  removeItem(ids);
}

function plus(obj){
  var ip  = $(obj).parents(".tr").find("input");
  var max = $(ip).attr("max");
  var num = parseInt($(ip).val());
  //console.log(max);
  if(num<max){
    num++;
    $(ip).val(num);
    var price = parseInt($(ip).data("price"));
    $(obj).parents(".tr").find(".subtotal").text("¥"+(price*num).toFixed(2));
    count();
  }
}

function minus(obj){
  var ip  = $(obj).parents(".tr").find("input");
  var max = parseInt($(ip).attr("max"));
  var num = parseInt($(ip).val());
  if(num>1){
    num--
    $(ip).val(num);
    if(num==max){
      $(obj).parents(".tr").find(".cb").addClass("c");
      $(obj).parents(".tr").find(".cb").removeClass("d");
    }

    var price = parseInt($(ip).data("price"));
    $(obj).parents(".tr").find(".subtotal").text("¥"+(price*num).toFixed(2));
    count();
  }
}

function count(){
  var num=0,total=0;
  $(".itemList .tr .cb.c").map(function(){
    var n     = parseInt($(this).parents(".tr").find("input").val());
    //console.log(n);
    var price = parseInt($(this).parents(".tr").find("input").data("price"));
    //console.log(price);
    if(!isNaN(n) && n>0){
      num+=n;
      total+=price;
    }
  });
  //console.log(num);
  //console.log(num);
  $("#totalmoney font").text(total.toFixed(2));
  $("#data-amount").text(total.toFixed(2));
  $("#data-count").text(num);
}
</script>
